<template>
  <!-- 搜索页面 -->
  <view>
    <template v-if="!isList">
      <view class="content pd">
        <view class="font-md" style="color: #6d6c67"> 搜索历史</view>
        <view class="searchLisr">
          <view
            v-for="(item, index) in historyList"
            :key="index"
            @click="hisClick(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
    </template>

    <template v-else>
      <view>
        <block v-for="(item, index) in newList" :key="index">
          <userListVue :item="item" :index="index"></userListVue>
        </block>
        <topicListVue :topPicList="topPicList"></topicListVue>
      </view>
    </template>
  </view>
</template>

<script>
import userListVue from "@/components/common/user-list.vue";
import topicListVue from "../../components/common/topicList.vue";
import { getSearch } from "@/api/api";
export default {
  components: { userListVue, topicListVue },
  data() {
    return {
      newList: [],
      isList: false,
      historyList: [],
      keyword: "",
      type: "",
      topPicList: [],
    };
  },
  //   用户输入事件
  onNavigationBarSearchInputChanged(e) {
    // console.log(e.text);
    this.keyword = e.text;
  },
  //   键盘点击搜索
  onNavigationBarSearchInputConfirmed(e) {
    // console.log("搜索");
    this.search();
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.search();
    }
  },
  onLoad(e) {
    console.log(e.type);
    this.type = e.type;
    let keyword = uni.getStorageSync("keyword")
      ? JSON.parse(uni.getStorageSync("keyword"))
      : [];
    this.historyList = keyword;
    // console.log(uni.getStorageSync("keyword"));
    // 监听事件 如果e.type是follow是关注 否则是点赞

    uni.$on("updateFollowOrSupport", (e) => {
      switch (e.type) {
        case "follow": // 关注
          this.follow(e.user_id);
          break;
        case "support": // 顶踩
          this.doSupport(e.data);
          break;
      }
    });
  },
  methods: {
    // 点击搜索按钮
    async search() {
      let index = this.historyList.findIndex((v) => v === this.keyword);
      if (index !== -1) {
        console.log(index);
        this.historyList.splice(index, 1);
        // this.historyList.unshift(this.keyword);
      }
      // this.historyList.unshif(this.keyword);
      this.historyList.unshift(this.keyword);
      uni.setStorageSync("keyword", JSON.stringify(this.historyList));
      if (this.keyword === "") {
        uni.showToast({
          title: "请输入内容",
          duration: 1000,
          icon: "error",
        });
        return;
      }
      // 发送请求
      uni.showLoading({
        title: "加载中",
      });
      // 获取到搜索结果
      let res = await getSearch({
        keyword: this.keyword,
        page: 1,
        type: this.type,
      });
      // console.log(res);
      if (res) {
        this.isList = true;
        if (this.type === "post") {
          console.log("话题");
          this.newList = res.list.map((item) => {
            return {
              userpic: item.user.userpic,
              id: item.id,
              user_id: item.user_id,
              title: item.title,
              username: item.user.username,
              newstime: item.create_time,
              isFollow: item.user.fens.length,
              support: {
                type:
                  item.support.length > 0
                    ? item.support[0].type === 0
                      ? "support"
                      : "unsupport"
                    : "",
                support_count: item.ding_count,
                unsupport_count: item.cai_count,
              },
              comment_count: item.comment_count,
              share_num: item.sharenum,
              titlepic: item.titlepic,
            };
          });
        } else {
          this.topPicList = res.list;
        }
        uni.hideLoading();
      }
    },
    // 关注
    follow(user_id) {
      console.log("触发");
      console.log(user_id);

      this.newList.forEach((item) => {
        if (item.user_id === user_id) {
          item.isFollow = true;
        }
      });
      uni.showToast({ title: "关注成功" });
    },
    // 点赞
    doSupport(type) {
      console.log("type--------", type);
      console.log(this.newList);
      this.newList.forEach((item) => {
        // console.log(item);
        if (item.id === type.id) {
          // 之前没有操作过
          if (item.support.type === "") {
            item.support[type.type + "_count"]++;
          } else if (
            item.support.type === "support" &&
            type.type === "unsupport"
          ) {
            console.log("顶", item.support.support_count);
            // 顶 - 1
            item.support.support_count--;
            // 踩 + 1
            item.support.unsupport_count++;
          } else if (
            item.support.type === "unsupport" &&
            type.type === "support"
          ) {
            // 之前踩了
            // 顶 + 1
            console.log("不执行", item.support.support_count);
            if (item.support.support_count === -1) {
              item.support.support_count = 0;
            }
            item.support.support_count++;
            // 踩 - 1
            item.support.unsupport_count--;
          }
          item.support.type = type.type;
        }
      });
    },
    // 点击搜索
    hisClick(text) {
      this.keyword = text;
      this.search();
    },
  },
};
</script>

<style lang="less">
.content {
  // padding: 70rpx 26px 0 26px;
  padding-top: 70rpx;
}
.font-md {
  color: "#6d6c67";
}
.searchLisr {
  display: flex;
  align-items: center;
  //   justify-content: space-between;
  flex-wrap: wrap;

  view {
    margin: 15rpx;
    padding: 0 10px;
    height: 70rpx;
    line-height: 70rpx;
    border: 1px solid #dee1e6;
    color: #6d6c67;
    border-radius: 5px;
  }
}
</style>
